<template>
  <div class="hello">
    <h1 ref="h1">{{ msg }}</h1>
    <div class="btn-box">
      <button @click="sendParent">传值给父容器</button>
    </div>
    <Children/>
  </div>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from '@vue/reactivity'
import { defineComponent, inject } from 'vue'
import { getCurrentInstance, onMounted, watch } from '@vue/runtime-core'
import Children from './child.vue'
export default defineComponent({
  name: 'HelloWorld',
  components:{
    Children
  },
  props: {
    msg: String
  },
  setup(props,ctx){
    // let item = []
    let h1 = ref(null)
    let a = ref('val')
    console.log(a)
    console.log(inject('childMsg'))
    const obj = reactive({
        num:0
    })
    const sendParent = ()=>{
        obj.num ++
        ctx.emit('handleToParent',obj.num)
    }
    watch(()=>obj.num,(newVal,oldVal)=>{
      console.log(newVal,oldVal)
    })

    onMounted(()=>{
      console.log(h1)
      console.dir(h1.value)

      const  { proxy }:any   =  getCurrentInstance()



      console.log(proxy.$http(),'proxy')
      console.log(proxy)
    })
    
    return{
      h1,
      ...toRefs(obj),
      sendParent
    }
  },
  
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.btn-box{
  background: #42b983;
}
</style>
